<template>
<div class="w-full h-full flex flex-row justify-center items-center" v-loading="loading">
  <div class="w-3/5 h-full bg-white px-2 mr-4 pt-2 rounded-lg">
    <span class="title block font-black px-2 py-2 text-cyan-500">
      <i class="iconfont icon-tongjibaobiao text-cyan-500 mr-2" style="fontSize: '14px'"/>{{ $t('common.semiFinishedProduct') }}</span>
    <div class="h-4/5">
      <v-chart ref="currentRef"/>
    </div>

  </div>
  <div class="w-2/5 h-full bg-white px-4 py-2 rounded-lg">
    <span class="title block font-black px-2 py-2 text-blue-600">
       <i class="iconfont icon-tiaobo text-blue-600 mr-2" style="fontSize: '14px'"/>{{ $t('common.RawMaterialAllocation') }}</span>
    <details-list/>
  </div>
</div>
</template>

<script setup>
import  detailsList from './detailsList.vue'
import { onMounted, ref } from 'vue'
import { getTodayTransferDetails } from '@/api/transferQuantityApi'
import useI18n from '@/hooks/language'


const { t } = useI18n()
const currentRef = ref(null)
const loading = ref(false)
const renderOption = (option) => {

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
    },
    legend: {
      orient: 'horizontal', // 设置为横向排列
      right: '3%',
      top: '0',
      textStyle: {
        color: '#333', // 文字颜色
        fontSize: 11, // 文字大小
      },
      itemWidth: 15, // 图例项的宽度
      itemHeight: 11, // 图例项的高度
    },
    textStyle: {
      color: '#2C3E50',
    },
    grid: {
      left: '1%',
      right: '2%',
      top:'15%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: [

      {
        type: 'category',
        data: ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00','22:00','24:00'],
        // nameTextStyle: {
        //     color: '#2C3E50',
        //     fontSize: 14,
        // },
        axisLabel: {
          color: '#606266',
          fontSize: 13
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#4E5969',
          fontSize: 13
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color:'#DCDFE6'
          }
        },
        axisLine: {
          show: false,
        },
      }
    ],
    color: ['#246EFF', '#00B2FF', '#81E2FF'],
    series: [

      {
        name: t('common.UpperSubstrate'),
        type: 'bar',
        stack: 'user',
        barWidth: 20,
        itemStyle: {
          // normal: {
          borderRadius:[0,0, 4, 4]
          // }
        },
        data: upFlooringList.value
      },
      {
        name: t('common.FoamBoard'),
        type: 'bar',
        stack: 'user',
        barWidth: 20,
        data: jcFlooringList.value
      },
      {
        name: t('common.FitVersion'),
        type: 'bar',
        stack: 'user',
        barWidth: 20,
        itemStyle: {
          // normal: {
          borderRadius:[4,4, 0, 0]
          // }
        },
        data: thFlooringList.value
      },

    ]
  }
}

const jcFlooringList = ref([])
const thFlooringList = ref([])
const upFlooringList = ref([])

const getNumList =async ()=>{
  loading.value = true
  try {
    const res = await getTodayTransferDetails()
    res.data.jcFlooring?.forEach(({ qty }) => jcFlooringList.value.push(qty))
    res.data.thFlooring?.forEach(({ qty }) => thFlooringList.value.push(qty))
    res.data.upFlooring?.forEach(({ qty }) => upFlooringList.value.push(qty))
    loading.value = false
  } catch (e) {
    console.log(e)
  }
}


onMounted(async() => {
  await getNumList()
  currentRef.value.setOption(renderOption())
})
</script>

<style scoped lang="scss">

</style>
